<template>
  <div class="dashboard-container">
    <div class="app-container" >

      <el-card style="weight: 100%;" >
         <el-row>
          <!-- 左侧 -->
            <el-col :span="20"><div class="grid-content ">
                <el-form :inline="true" >
                    <el-form-item label="学科名称">
                    <el-input v-model="content" ></el-input>
                  </el-form-item>

                    <el-form-item>
                    <el-button @click="content=''"  size="small">清除</el-button>
                    <el-button type="primary" @click="seacher"  size="small" >搜索</el-button>
                  </el-form-item>
          </el-form>
            </div>
            </el-col>
            <!-- 右侧 -->

             <el-col :span="4"><div class="grid-content bg-purple-light">
                <el-button type="success" icon="el-icon-edit" size="small" @click="addItem" style="float:right">新增学科</el-button>
             </div></el-col>

         </el-row>

          <!-- alert -->
          <el-alert
             :title="`数据一共${counts}条`"
              type="info"
              show-icon
              :closable="false">
          </el-alert>

          <!-- 表格 -->
          <el-table :data="list"  ref="form" style="width: 100%" v-model="showLoading">
            <el-table-column type="index" label="序号"  width="50" :index="indexMethod"></el-table-column>
            <el-table-column prop="subjectName" label="学科名称" > </el-table-column>
            <el-table-column prop="username" label="创建者" width="120"> </el-table-column>
            <el-table-column prop="addDate" label="创建日期" width="160">
                <template #default="{row}">
                  {{row.addDate | timeFormate}}
                </template>
            </el-table-column>
            <el-table-column prop="isFrontDisplay" label="前台是否显示" width="120">

              <template #default="{row}">
                  {{row.isFrontDisplay? '是':'否'}}
              </template>

            </el-table-column>
            <el-table-column prop="twoLevelDirectory" label="二级目录"> </el-table-column>
            <el-table-column prop="tags" label="标签" > </el-table-column>
            <el-table-column prop="totals" label="题目数据" > </el-table-column>
            <el-table-column fixed="right"  label="操作"  width="220">
              <template #default="{row}">
                  <el-button type="text" size="small" @click="directorys(row)">学科分类</el-button>
                  <el-button type="text" size="small" @click="tags(row)">学科标签</el-button>
                  <el-button type="text" size="small" @click="changeItem(row)">修改</el-button>
                  <el-button type="text" size="small" @click="delItem(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页符 -->
          <el-pagination
            background
            :total="counts"
            :current-page="page"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :page-sizes="[5, 10, 20, 50]"
            layout="->, prev, pager, next, sizes, jumper">
          </el-pagination>

      </el-card>
    </div>
    <el-dialog
        :title="title"
        :visible="showDialog"
        @close="close"
        width="30%"

       >
        <el-form :model="form" :rules="rules" ref="subjectForm" label-width="100px" >
          <el-form-item label="学科名称" prop="subjectName" >
            <el-input v-model="form.subjectName"  clearable style="width:80%;"></el-input>
          </el-form-item>

          <el-form-item label="是否显示">
             <!--active-color 设置开关的背景颜色  active-value开关打开的，默认true/1   -->
          <el-switch
            v-model="form.isFrontDisplay"
            active-color="#13ce66"
            :active-value="1"
            inactive-color="#ff4949">
          </el-switch>
          </el-form-item>
        </el-form>

        <template #footer>
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, detail, add, update } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      content: '',
      list: [],
      page: 1,
      pagesize: 10,
      counts: 0,
      // value: true,
      form: {
        subjectName: '',
        // username: '超级管理员',
        // addDate: '',
        isFrontDisplay: 1
        // twoLevelDirectory: '',
        // tags: '',
        // totals: ''
      },

      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: ['blur', 'change'] }
        ]
      },
      showDialog: false,
      showLoading: false

    }
  },
  created () {
    this.getSubjectsList()
  },
  computed: {
    title () {
      return this.form.id ? '修改学科' : '新增学科'
    }
  },
  methods: {
    // 调用学科列表的数据，初始化数据
    async getSubjectsList () {
      this.showLoading = true
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.content
      })
      this.list = data.items
      this.counts = data.counts
      this.showLoading = false
      console.log(data)
    },

    // 删除
    delItem (row) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        type: 'warning'
      }
      ).then(async () => {
        await remove({ id: row.id })
        this.$message.success('删除成功')
        // 边界处理
        if (this.list.length === 1 && this.page > 1) {
          this.page--
        }
        this.getSubjectsList()
      })
    },

    // 点击修改
    async changeItem (row) {
      const { data } = await detail({ id: row.id })
      console.log(data, '详情')
      // 法1：
      // this.form.subjectName = data.subjectName
      // this.form.id = data.id

      // 法2：data里面所有的数据覆盖form里面的数据，这样就不用一个一个的赋值了
      this.form = data
      // console.log(this.form.id, '00')
      //  this.value= data.isFrontDisplay ? true:false
      // this.value = !!data.isFrontDisplay

      this.showDialog = true
    },

    // 点击新增
    async addItem () {
      this.showDialog = true
    },

    // 每页条数发生变化时调用
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.getSubjectsList()
    },
    // 翻页时调用，回传当前页码的值即val
    handleCurrentChange (val) {
      this.page = val
      this.getSubjectsList()
    },

    // 自定义序列
    indexMethod (index) {
      return (this.page - 1) * this.pagesize + index + 1
    },

    // 点击取消--关闭弹窗
    close () {
      this.showDialog = false
      this.form = Object.assign({}, this.$options.data().form)
      this.$refs.subjectForm.resetFields()
      // 如果有些框置空不了，手动置空
      // this.form = {
      //   subjectName: '',
      //   isFrontDisplay: 1
      // }
    },

    // 点击确定 ，提交表格内容
    submit () {
      this.$refs.subjectForm.validate(async (valid) => {
        if (valid) {
          if (this.form.id) {
            await update(this.form)
            this.$message.success('修改学科成功')
          } else { // 新增
            // const isFrontDisplay = this.value ? 1 : 0
            // console.log({ subjectName: this.form.subjectName, isFrontDisplay: isFrontDisplay })

            await add({ subjectName: this.form.subjectName, isFrontDisplay: this.form.isFrontDisplay })
            this.page = 1
            // 提示用户 关闭弹窗 清空表单 请求数据
            this.$message.success('新增学科成功')
          }
          this.close()
          this.getSubjectsList()
        } else {
          return false
        }
      })
    },

    // 点击搜索
    async seacher () {
      const { data } = await list({ subjectName: this.content })
      console.log(data, 'seacher')
      this.page = 1
      this.list = data.items
      this.counts = data.counts
    },

    // 点击学科分类/标签，实现路由跳转
    directorys (row) {
      this.$router.push({ path: '/subjects/directorys', query: { id: row.id, name: row.subjectName } })
      console.log(row, '学科分类')
    },
    tags (row) {
      this.$router.push(
        { path: '/subjects/tags', query: { id: row.id, name: row.subjectName } }
      )
      console.log(row.id, '11')
      console.log(row, '22')
    }

  }
}

</script>

<style lang="scss" scoped>

</style>
